import React from "react";
import { subAction } from "./store/actionCreators";

import { connect } from "./utils/connect";

const Index = (props) => {
  return (
    <div>
      <h1> about: {props.counter} </h1>
      <button
        onClick={(e) => {
          props.subCounter(1);
        }}
      >
        sub 1
      </button>
      <button
        onClick={(e) => {
          props.subCounter(5);
        }}
      >
        sub 5
      </button>
    </div>
  );
};

const mapStateToProps = (state) => {
  return {
    counter: state.counter,
  };
};

const mapDispatchProps = (dispatch) => {
  return {
    subCounter(num) {
      dispatch(subAction(num));
    },
  };
};

export default connect(mapStateToProps, mapDispatchProps)(Index);
